<template>
  <div class="main">
    <el-form
      ref="form"
      :model="formData"
      :rules="rules"
      label-width="100px"
      :inline="false"
      size="normal"
    >
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="用户管理" name="base">
          <el-row>
            <el-col :offset="2" :span="16">
              <el-row>
                <el-col>
                  <el-form-item label="标题" prop="title">
                    <el-input
                      v-model="formData.title"
                      clearable
                      placeholder="请输入标题名称"
                    >
                      <template slot="append">
                        <el-button icon="el-icon-search">查重</el-button>
                      </template>
                    </el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <!-- ----------- -->
              <el-row>
                <el-col :span="12">
                  <el-form-item label="作者" prop="author">
                    <el-input
                      v-model="formData.author"
                      clearable
                      placeholder="请输入作者"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="分类" prop="cateid">
                    <el-select
                      v-model="formData.cateid"
                      clearable
                      placeholder="请选择"
                    >
                      <el-option
                        v-for="item in cateList"
                        :key="item.id"
                        :value="item.id"
                        :label="item.catename"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <!-- ----------- -->
              <el-row>
                <el-col :span="12">
                  <el-form-item label="阅读次数" prop="click">
                    <el-input-number
                      v-model="formData.click"
                      :min="1"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="创建时间" prop="create_date">
                    <el-date-picker
                      v-model="formData.create_date"
                      type="datetime"
                      placeholder="选择日期时间"
                      value-format="timestamp"
                    />
                  </el-form-item>
                </el-col>
              </el-row>
              <!-- ----------- -->
              <el-row>
                <el-col :span="12">
                  <el-form-item label="是否推荐" prop="ishot">
                    <el-switch
                      v-model="formData.ishot"
                      active-text="是"
                      inactive-text="否"
                      :active-value="1"
                      :inactive-value="0"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="是否置顶" prop="istop">
                    <el-switch
                      v-model="formData.istop"
                      active-text="是"
                      inactive-text="否"
                      :active-value="1"
                      :inactive-value="0"
                    />
                  </el-form-item>
                </el-col>
              </el-row>
              <!-- ----------- -->
              <el-row>
                <el-col :span="12">
                  <el-form-item label="收藏数量" prop="lovenum">
                    <el-input
                      v-model="formData.lovenum"
                      clearable
                      placeholder="请输入收藏数量名称"
                    />
                  </el-form-item>
                </el-col>
              </el-row>
              <!-- ----------- -->
              <el-row>
                <el-col :span="12">
                  <el-form-item label="文章缩略图" prop="pic">
                    <el-upload
                      ref="upload"
                      class="upload-demo"
                      action="http://124.223.14.236:8060/admin/common/upload?type=images"
                      :on-remove="fileRemove"
                      :on-success="fileSuccess"
                      :on-preview="filePreview"
                      :file-list="newFileList"
                      list-type="picture"
                      :headers="headerObj"
                      multiple
                      :limit="3"
                    >
                      <el-button
                        size="small"
                        type="primary"
                      >点击上传</el-button>
                    </el-upload>
                  </el-form-item>
                </el-col>
              </el-row>
              <!-- ----------- -->
              <el-row>
                <el-col :span="24">
                  <el-form-item label="文章标签" prop="tags">
                    <el-checkbox-group v-model="formData.tags">
                      <el-checkbox
                        v-for="item in tagList"
                        :key="item.id"
                        :label="item.tagname"
                      />
                    </el-checkbox-group>
                  </el-form-item>
                </el-col>
              </el-row>
              <!-- -------------------------- -->
            </el-col>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="配置管理" name="seo">
          <el-row type="flex" justify="center">
            <el-col :span="20">
              <el-form-item label="seo关键字" prop="keywords">
                <el-input v-model="formData.keywords" placeholder="请输入seo关键字名称" type="textarea" rows="3" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row type="flex" justify="center">
            <el-col :span="20">
              <el-form-item label="seo的描述" prop="description">
                <el-input v-model="formData.description" placeholder="请输入seo的描述名称" type="textarea" rows="3" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="角色管理" name="article">
          <el-row type="flex" justify="center">
            <el-col :span="19">
              <el-form-item label="文章内容" prop="content">
                <quill-editor v-model="formData.content" @blur="$refs.form.validateField('content')" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-tab-pane>
      </el-tabs>
      <!-- ---------------------------- -->
      <el-row type="flex" justify="center">
        <el-col :span="8">
          <el-form-item center>
            <el-button icon="el-icon-plus" type="success" @click="onSubmit">立即发布</el-button>
            <el-button icon="el-icon-s-claim" type="primary">保存草稿</el-button>
            <el-button icon="el-icon-back" type="warning" @click="$router.push('/content_article')">返回列表</el-button>
          </el-form-item></el-col>
      </el-row>
    </el-form>
    <!--  对话框 -->
    <el-dialog
      title="图片"
      :visible.sync="isShow"
      width="30%"
    >
      <el-row>
        <img ref="showImg" style="width:100%" :src="imgSrc" alt="">
      </el-row>

    </el-dialog>

  </div>
</template>

<script>
import { addArticleApi, editArticleApi, getArticleInfoApi, getCateListApi, getTagListApi } from '@/api/article'
import { getToken } from '@/utils/auth'

// require styles
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

import { quillEditor } from 'vue-quill-editor'
export default {
  name: 'FormPage',
  components: {
    quillEditor
  },
  data() {
    return {
      imgSrc: '',
      isShow: false,
      activeName: 'base',
      formData: {
        author: '',
        cateid: '',
        click: '',
        content: '',
        create_date: '',
        description: '',
        ishot: 0,
        istop: 0,
        keywords: '',
        lovenum: '',
        pic: '',
        status: '',
        tags: [],
        title: ''
      },
      rules: {
        author: [
          { required: true, message: '必须', trigger: 'blur' }
        ],
        cateid: [
          { required: true, message: '必须', trigger: 'change' }
        ],
        click: [
          { required: true, message: '必须', trigger: 'blur' }
        ],
        content: [
          { required: true, message: '必须', trigger: 'blur' }
        ],
        create_date: [
          { required: true, message: '必须', trigger: 'change' }
        ],
        description: [
          { required: true, message: '必须', trigger: 'blur' }
        ],
        ishot: [
          { required: true, message: '必须', trigger: 'change' }
        ],
        istop: [
          { required: true, message: '必须', trigger: 'change' }
        ],
        keywords: [
          { required: true, message: '必须', trigger: 'blur' }
        ],
        lovenum: [
          { required: true, message: '必须', trigger: 'blur' }
        ],
        pic: [
          { required: true, message: '必须', trigger: 'change' }
        ],
        status: [
          { required: true, message: '必须', trigger: 'blur' }
        ],
        tags: [
          { required: true, message: '必须', trigger: 'blur' }
        ],
        title: [
          { required: true, message: '必须', trigger: 'blur' }
        ]
      }, // 匹配规则
      cateList: [], // 文章分类
      tagList: [],
      fileList: [],
      headerObj: {
        'X-Token': getToken()
      }
    }
  },
  computed: {
    newFileList() {
      return this.fileList.map(item => {
        // item.url = this.$ImgUrl + item.url
        return { name: '点击查看详情', url: this.$ImgUrl + item.url }
      })
    }
  },
  created() {
    this.getCateList()
    this.getTagList()
    if (this.$route.params.id) {
      this.getArticleInfo()
    }
  },
  methods: {
    // 获取详情
    async getArticleInfo() {
      const res = await getArticleInfoApi(this.$route.params.id)
      this.fileList = res.pic ? res.pic.split(',').map(item => ({ name: '点击查看详情', url: item })) : []
      this.formData = res
      this.formData.tags = res.tags ? res.tags.split(',') : []
    },

    handleClick(val) {
      // console.log(val)
    },
    // 分类列表-全部
    async getCateList() {
      const res = await getCateListApi()
      this.cateList = res
    },
    // 标签列表-全部
    async getTagList() {
      const res = await getTagListApi()
      this.tagList = res
    },
    // 图片上传成功
    fileSuccess({ data }, file, fileList) {
      console.log(data)
      this.fileList.push({ name: '点击查看详情', url: data.savePath })
      this.formData.pic = this.fileList.map(item => item.url).join(',')
    },
    // 图片移除
    fileRemove(file, fileList) {
      console.log(file, fileList)
      this.fileList = fileList.map(item => {
        return {
          name: '点击查看详情',
          // url: item.url.replace(/^http:\/\/124.223.14.236:8060\/$/, '')
          url: item.url.replace(/^http:\/\/124\.223\.14\.236:8060\//, '')
        }
      })
      console.log(this.fileList)
      this.formData.pic = this.fileList.map(item => item.url).join(',')
    },
    // 预览
    filePreview(file) {
      this.isShow = true
      this.imgSrc = file.url
    },
    // 发布
    async  onSubmit() {
      try {
        await this.$refs.form.validate()
        this.formData.tags = this.formData.tags.join(',')
        // console.log(this.formData)
        this.formData.id ? await editArticleApi(this.formData) : await addArticleApi(this.formData)
        this.formData.id ? this.$message.success('修改成功') : this.$message.success('添加成功')
        this.$router.push('/content_article')
      } catch (err) {
        this.$message.warning('验证失败')
        console.log(err)
      }
    }

  }

}
</script>

<style lang="scss" scoped>
.main {
  background-color: #fff;
  padding: 10px;
}

::v-deep .ql-editor {
  height: 200px;
}
</style>
